﻿@using AntDesign.Core.JsInterop.Modules.Components
@inherits AntDesignTestBase
@code {
    public Menu_Horizontal_Tests()
    {
        JSInterop.Setup<AntDesign.JsInterop.DomRect>(JSInteropConstants.GetBoundingClientRect, _ => true)
        .SetResult(new AntDesign.JsInterop.DomRect());
        JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.AddOverlayToContainer, _ => true)
        .SetResult(new OverlayPosition() { Top = 0, Left = 0, ZIndex = 5000, Placement = Placement.BottomLeft });
        JSInterop.Setup<HtmlElement>(JSInteropConstants.DomInfoHelper.GetFirstChildDomInfo, _ => true)
        .SetResult(new HtmlElement { ClientWidth = 123 });
        JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.UpdateOverlayPosition, _ => true);
    }

    private RenderFragment GetBasicHorizontalRender()
    {
        return 
    @<Menu Mode=MenuMode.Horizontal>
        <MenuItem>Navigation One</MenuItem>
        <SubMenu Title="Navigation Two">
            <MenuItemGroup Title="Item 1">
                <MenuItem Key="nest:2:1">Option 1</MenuItem>
                <MenuItem>Option 2</MenuItem>
            </MenuItemGroup>
            <MenuDivider />
            <MenuItemGroup Title="Item 2">
                <MenuItem>Option 3</MenuItem>
                <SubMenu Title="Option 4">
                    <MenuItem Key="nest:2:2:4">Option 1</MenuItem>
                    <SubMenu Title="Option 5">
                        <MenuItem Key="nest:2:2:4:5:1">Option 1</MenuItem>
                        <MenuItem Key="nest:2:2:4:5:2">Option 2</MenuItem>
                    </SubMenu>
                </SubMenu>
            </MenuItemGroup>
        </SubMenu>
        <MenuItem>Navigation Three</MenuItem>
        </Menu>;
    }

    private RenderFragment GetBasicVerticalRender()
    {
        return 
        @<Menu Mode=MenuMode.Vertical>
        <MenuItem>Navigation One</MenuItem>
        <SubMenu Title="Navigation Two">
            <MenuItemGroup Title="Item 1">
                <MenuItem Key="nest:2:1">Option 1</MenuItem>
                <MenuItem>Option 2</MenuItem>
            </MenuItemGroup>
        </SubMenu>
        <MenuItem>Navigation Three</MenuItem>
        </Menu>;
    }

    private RenderFragment GetBasicInlineRender()
    {
        return 
        @<Menu Mode=MenuMode.Inline>
        <MenuItem>Navigation One</MenuItem>
        <SubMenu Title="Navigation Two">
            <MenuItemGroup Title="Item 1">
                <MenuItem Key="nest:2:1">Option 1</MenuItem>
                <MenuItem>Option 2</MenuItem>
            </MenuItemGroup>
        </SubMenu>
        <MenuItem>Navigation Three</MenuItem>
        </Menu>;
    }

    [Fact]
    public void Basic_horizontal_top_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        //Assert
        cut.MarkupMatches(@"
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-horizontal"" id:ignore direction=""ltr"" role=""menu"">
		        <li class=""ant-menu-item"" role=""menuitem"" style="""">
			        <span class=""ant-menu-title-content"">
                        Navigation One
			        </span>
		        </li>
                <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" role=""button"">
                        <span class=""ant-menu-title-content"">
                            Navigation Two
                        </span>
                    </div>
                </li>
        		<li class=""ant-menu-item"" role=""menuitem"" style="""">
        			<span class=""ant-menu-title-content"">
                        Navigation Three
			        </span>
		        </li>
            </ul>");
    }

    [Fact]
    public async Task Basic_horizontal_submenu_should_be_hidden_when_mouseleave()
    {
        //Arrange
        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
        await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseleave", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        // Assert
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        topOverlay.Find(".ant-menu-submenu").ClassList.Contains("ant-menu-submenu-hidden");
    }

    [Fact]
    public async Task Horizontal_menu_mode_submenu_should_be_vertical()
    {
        //Arrange
        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        // Assert
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        topOverlay.Find(".ant-menu-sub").ClassList.Contains("ant-menu-vertical");
    }

    [Fact]
    public async Task Vertical_menu_mode_submenu_should_be_vertical()
    {
        //Arrange
        var cut = Render<AntDesign.Menu>(GetBasicVerticalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        // Assert
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        topOverlay.Find(".ant-menu-sub").ClassList.Contains("ant-menu-vertical");
    }

    [Fact]
    public async Task Inline_menu_mode_submenu_should_be_inline()
    {
        //Arrange
        var cut = Render<AntDesign.Menu>(GetBasicInlineRender());
        cut.Find(".ant-menu-sub").ClassList.Contains("ant-menu-inline");
    }


    [Fact]
    public async Task Basic_horizontal_first_nested_menu_with_groups_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        cut.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert
        topOverlay.MarkupMatches(@"
            <div class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"" style:ignore>
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
                    <li class=""ant-menu-item-group"">
                        <div class=""ant-menu-item-group-title"">
                            Item 1
                        </div>
                        <ul class=""ant-menu-item-group-list"">
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 1
			                    </span>
		                    </li>
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 2
			                    </span>
		                    </li>
                        </ul>
                    </li>
                    <li class=""ant-menu-item-divider""></li>
                    <li class=""ant-menu-item-group"">
                        <div class=""ant-menu-item-group-title"">
                            Item 2
                        </div>
                        <ul class=""ant-menu-item-group-list"">
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 3
			                    </span>
		                    </li>
                            <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                                <div class=""ant-menu-submenu-title"" role=""button"">
                                    <span class=""ant-menu-title-content"">
                                        Option 4
                                    </span>
                                    <i class=""ant-menu-submenu-arrow""></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        ");
    }

    [Fact]
    public async Task Basic_horizontal_second_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await topExpandable.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await midExpandable.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
        await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
        var midOverlay = midExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert
        midOverlay.MarkupMatches(@"
            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1
                		</span>
		            </li>
                    <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                        <div class=""ant-menu-submenu-title"" role=""button"">
                            <span class=""ant-menu-title-content"">
                                Option 5
                            </span>
                            <i class=""ant-menu-submenu-arrow""></i>
                        </div>
                    </li>
                </ul>
            </div>");
    }

    [Fact]
    public async Task Basic_horizontal_third_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        cut.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        midExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
        await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
        var bottomExpandable = midExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        bottomExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
        await midExpandable.InvokeAsync(() => bottomExpandable.Instance.Show());
        var bottomOverlay = bottomExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert
        bottomOverlay.MarkupMatches(@"
            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1
                		</span>
		            </li>
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 2
                		</span>
		            </li>
                </ul>
            </div>");
    }

}
